CSS排版與佈局

1. CSS盒模型（Box Model）

CSS盒模型是理解元素佈局的基礎，所有HTML元素都可以看作一個盒子，包含以下幾個部分：

• 內容（Content）：元素的實際內容，如文字或圖像。
• 內邊距（Padding）：內容與邊框之間的空間。
• 邊框（Border）：圍繞元素內容與內邊距的邊界線。
• 外邊距（Margin）：元素與其他元素之間的距離。

盒模型的計算方式：

• 元素的總寬度 = 內容寬度 + padding + border + margin
• 元素的總高度 = 內容高度 + padding + border + margin

這有助於控制元素之間的間距和大小，設計可控的佈局。

示例：

div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

2. CSS佈局：浮動（Float）

浮動（float） 是一種將元素從文檔正常流中移出的方法，通常用來進行簡單的佈局，如兩欄或多欄佈局。浮動元素旁邊的內容會環繞在浮動元素的周圍。

常見使用：

• 創建多列佈局，如圖片和文字併排。
• 網站的側邊欄（sidebar）。

問題與解決：

• 浮動元素的父容器可能會「塌陷」，導致後續內容出現佈局問題。解決方法是使用clear: both 或者使用clearfix技術。

示例：

img {
  float: left;
  margin: 10px;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

3. 定位（Position）

CSS的position屬性控制元素在頁面中的定位方式。常見的定位模式包括：

• static：默認定位，元素按正常文檔流排列。
• relative：相對於元素自身的正常位置進行偏移，但仍占據文檔流中的空間。
• absolute：相對於最近的已定位（非static）祖先元素進行定位，並脫離文檔流。
• fixed：相對於視口進行定位，不會隨滾動條滾動。
• sticky：根據滾動位置在relative和fixed之間切換。

示例：

.relative-box {
  position: relative;
  top: 20px;
  left: 30px;
}

.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
}

4. Flexbox（彈性盒模型）

Flexbox 是一個強大的CSS佈局工具，用來設計複雜且靈活的佈局。它可以在單行或多行內排列元素，並且具有對齊和空間分配功能。

核心概念：

• flex container：一個包含所有flex項目的父元素，通過display: flex來啟用。
• flex item：容器中的每個直接子元素。

常用屬性：

• justify-content：控制子元素在主軸（橫軸）上的對齊方式，如flex-start, center, space-between。
• align-items：控制子元素在交叉軸（縱軸）上的對齊方式。
• flex-direction：設定主軸方向，如row（橫向排列）或column（縱向排列）。
• flex-wrap：控制子元素是否在容器中換行。

示例：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
}

使用場景：

• 水平居中和垂直居中元素。
• 彈性布局，自動調整子元素大小和間距。

5. CSS Grid（網格佈局）

CSS Grid 是另一個強大的佈局系統，適合用於設計二維佈局（行和列）。相比Flexbox，Grid更適合處理複雜的佈局需求。

核心概念：

• grid container：網格容器，用display: grid啟用。
• grid item：容器中的每個直接子元素。
• grid-template-columns / grid-template-rows：定義列和行的結構。

常用屬性：

• grid-gap：定義行與列之間的間距。
• grid-area：控制元素在網格中的位置和跨度。

示例：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-item {
  grid-column: span 2; /* 讓元素橫跨兩列 */
}

使用場景：

• 創建多列佈局，尤其是複雜的網站頁面，如圖片展示或文章佈局。

6. Flexbox vs Grid：何時使用

• Flexbox 更適合一維佈局，處理單行或單列的彈性排列。
• Grid 更適合二維佈局，當需要同時處理行和列時，Grid是更好的選擇。

兩者可以一起使用，Flexbox處理細粒度的佈局，Grid處理整體佈局。